<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Test Mixed Dijit Layout</title>
		<meta name="viewport" content="width=570">
		<style>
			@import "../../dijit/themes/claro/document.css";
			@import "../../dijit/themes/claro/claro.css";
			@import "../css/skins/claro.css";
			html, body {
				padding: 0;
				margin: 0;
				height: 100%;
				overflow: hidden;
			}
			#appLayout {
				height: 100%;
			}
			#grid1, #grid2 {
				height:95%;
			}
		</style>
		<script src="../../dojo/dojo.js"
			data-dojo-config="async: true"></script>
		<script>
			require(["dgrid/OnDemandGrid",
				"dgrid/Selection",
				"dgrid/extensions/DijitRegistry",
				"dijit/registry",
				"dojo/_base/lang",
				"dojo/_base/declare",
				"dijit/layout/BorderContainer",
				"dijit/layout/TabContainer",
				"dojo/parser",
				"dgrid/test/data/base",
				"dijit/layout/ContentPane",
				"dojo/domReady!"
			], function(Grid, Selection, DijitRegistry, registry, lang, declare, BC, TC, parser, testStore){
				var
					gridCols = window.gridCols = {
						col1: "Column 1",
						col2: {name: "Column 2", sortable: false},
						col3: "Column 3",
						col4: "Column 4"
					},
					CustomGrid = declare([Grid, Selection, DijitRegistry]),
					grid1,
					grid2;
					
				parser.parse();
				
				// Add grids to TabContainer parsed within page
				grid1 = window.grid1 = new CustomGrid({
					id: "grid1",
					store: testStore,
					columns: lang.clone(gridCols),
					selectionMode: "single",
					title: "Tab 1"
				});
				registry.byId("tc").addChild(grid1);
				
				grid2 = window.grid2 = new CustomGrid({
					id: "grid2",
					store: testStore,
					columns: lang.clone(gridCols),
					selectionMode: "single",
					title: "Tab 2"
				});
				registry.byId("tc").addChild(grid2);
			});
		</script>
	</head>
	<body class="claro">
		<div id="appLayout" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design: 'headline'">
			<div class="centerPanel" data-dojo-type="dijit.layout.TabContainer" id="tc"
				data-dojo-props="region: 'center', tabPosition: 'top'">
			</div>
			<div class="edgePanel" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'top'">
				Test dijit mixed layout - programmatic dgrid in declarative layout
			</div>
		</div>
	</body>
</html>
